<template>
  <div class="train">
     <div class="header-back" @click="go()"></div>
    <div class="banner">
      <img src="images/banner.png" alt="" />
    </div>
    <div class="index">
      <ul class="index-tab">
        <li :class="bool ? '' : 'cur'" @click="fun()">单程</li>
        <li :class="bool ? 'cur' : ''" @click="fun1()">往返</li>
      </ul>
      <component :is="com"></component>
    </div>
    <ul class="foot">
      <li>
        <img src="images/train1.jpg" alt="" />
        <p>抢票</p>
      </li>
      <li>
        <img src="images/train2.jpg" alt="" />
        <p style="margin-top: 0.02rem">订单</p>
      </li>
    </ul>
  </div>
</template>

<script>
import Left from '@/components/train/left.vue'
import Right from '@/components/train/right.vue'
export default {
  data() {
    return {
      bool: false,
      com:'Left'
    };
  },
  components:{
    Left,
    Right
  },
  methods: {
    fun() {
      this.bool = !this.bool;
      this.com='Left'
    },
    go(){
      this.$router.go(-1)
    },
    fun1(){
      this.bool = !this.bool;
      this.com='Right'
    }
  },
  
};
</script>

<style scoped>
.train {
  position: relative;
}
.header-back{
    position: absolute;
     top: .1rem;
    left: .1rem;
    background:url(https://pages.c-ctrip.com/you/livestream/tripshoot_forward%20_black@3x.png) no-repeat 50%;
    background-size: .24rem;
    width: .24rem;
    height: .24rem;
}
.banner {
  width: 100%;
}
.banner img {
  width: 100%;
  height: auto;
}
.index {
  position: absolute;
  top: 1.2rem;
  left: 0.1rem;
  background-color: #fff;
  width: 3.5rem;
  border-radius: 0.1rem;
  padding: 10px 12px 20px;
  margin: 0 auto;
  box-shadow: 0 6px 12px -2px rgb(0 0 0 / 8%);
}
.index-tab {
  display: flex;
  font-size: 0.14rem;
  font-weight: 700;
}
.index-tab li {
  width: 50%;
  height: 0.4rem;
  text-align: center;
  position: relative;
}
.cur {
  color: #0086f6;
}
.cur::after {
  width: 30px;
  height: 3px;
  position: absolute;
  content: "";
  left: 50%;
  bottom: 0;
  margin-left: -15px;
  background: #0086f6;
  border-radius: 3px;
}

.foot {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 -1px 4px rgb(0 0 0 / 8%);
  height: 0.48rem;
}
.foot li {
  padding-top: 0.02rem;
  text-align: center;
  width: 50%;
}
</style>